import { dom } from "../tool";
interface PropType {
    children: string | HTMLElement,
    className?: string;
    value?: string;
    onChange?: (value: string) => void;
    showType?: 'color' | 'backgroundColor';
    style?: string;
    target?: HTMLElement;
}
interface ColorSelectType {
    new(props: PropType): ColorSelectType;
    value: string;
    setValue: (value?: string) => void;
    render: (node?: HTMLElement) => any;
    onChange?: (value: string) => void;
}
function ColorSelect(this: ColorSelectType, props: PropType) {
    const { children, className, value = '#000000', onChange, showType = 'color', style, target } = props;
    this.onChange = onChange;
    const label = 'string' == typeof children ? dom('div', { innerText: children, className: showType == 'color' ? null : 'gkh-color-box' }) : dom('div', { child: children, className: showType == 'color' ? null : 'gkh-color-box' });
    const input: any = dom('input', { attribute: { type: 'color' }, style: "display:none;" });
    const container = dom('div', { target, childs: [label, input], className: className ? 'gkh-color-select '.concat(className) : 'gkh-color-select', style });
    this.setValue = (value?: string) => {
        this.value = value??'00ff00';
        input.value = this.value;
        if ('color' == showType) {
            label.style.color = this.value;
        } else {
            label.style.backgroundColor = this.value;
        }
    }
    this.setValue(value);
    label.onclick = () => {
        input.click();
    }
    input.onchange = (event: any) => {
        this.setValue(input.value);
        if (this.onChange instanceof Function) {
            this.onChange(input.value)
        }
    }
    this.render = (node?: HTMLElement) => {
        if (node) node.appendChild(container);
        return container;
    }
    return this;
}

export default ColorSelect as unknown as ColorSelectType;